<template>
  <div class="bg-form">
    <el-form :model="addForm" label-width="120px" :show-message="false" :rules="addFormRules" ref="addForm">
      <el-row>
        <el-col>基础信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="销售门店:">
            <el-input disabled v-model="addForm.storeName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户姓名:">
            <el-input disabled v-model="addForm.clientName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号:">
            <el-input disabled v-model="addForm.vin" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售人:">
            <el-input disabled v-model="addForm.sellUserName" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="品 牌:">
            <el-input disabled v-model="addForm.carBrandName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车 系:">
            <el-input disabled v-model="addForm.carSeriesName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车 型:">
            <el-input disabled v-model="addForm.carModelName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="销售价格:">
            <el-input disabled v-model="addForm.amount" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="车身颜色:">
            <el-input disabled v-model="addForm.outColor" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内饰颜色:">
            <el-input disabled v-model="addForm.inColor" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车顶颜色:">
            <el-input disabled v-model="addForm.roofColor" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="前装及价格明细:">
            <el-input disabled v-model="addForm.carOrderNo" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>出库确认信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="仓 库:" prop="storageName">
            <el-input disabled v-model="addForm.storageName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓 位:" prop="storageSiteName">
            <el-input disabled v-model="addForm.storageSiteName" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计交车时间:" prop="yujcrq">
            <el-input disabled v-model="addForm.yujcrq" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="利 率:" prop="zjlxId">
            <el-select
              class="w-100"
              clearable
              v-model="addForm.zjlxId"
              placeholder="请选择"
              @change='handleLx'
            >
              <el-option
                v-for="item in list"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出库利息:">
            <el-input disabled v-model="addForm.cklx" clearable placeholder="出库利息"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDict } from '@/utils/index'
import {
  detailById,
  save
} from '@/api/pre-sale/newCarStock/salePutOut'
import { findAllByStoreId, getLx } from '@/api/pre-sale/newCarStock/capitalInterest'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['entryStore'])
  },
  data() {
    return {
      dict: {
        sites: ['订单类别'],
        types: ['PC端', 'APP端']
      },
      addForm: {
        paymentTime: ''
      },
      addFormRules: {},
      list: []
    }
  },
  mounted() {
    this.dict = getDict(this.dict.sites)
    this.getDetail()
    console.log(this.entryStore)
  },
  methods: {
    // 保存
    async onSubmit() {
      await save({
        id: this.$route.query.id,
        zjlxId: this.addForm.zjlxId,
        cklx: this.addForm.cklx
      }).then(res => {
        const { success } = res
        if (success) {
          this.$router.push({
            name: 'salePutOut'
          })
        }
      })
    },
    async getDetail() {
      await detailById(this.$route.query.id).then((res) => {
        const { success, data } = res
        if (success) {
          this.addForm = {
            ...this.addForm,
            ...data
          }
          this.findAllByStoreId(data.storeId)
        }
      })
    },
    async findAllByStoreId(storeId) {
      await findAllByStoreId(storeId).then((res) => {
        const { success, data } = res
        if (success) {
          this.list = data
        }
      })
    },
    handleLx(val) {
      if (val) {
        this.getLx(val)
      } else {
        this.addForm.cklx = ''
      }
    },
    async getLx(val) {
      await getLx({
        id: val,
        inventoryDay: this.addForm.inventoryDay,
        realityPrice: this.addForm.realityPrice
      }).then((res) => {
        const { success, data } = res
        if (success) {
          this.addForm = {
            ...this.addForm,
            cklx: data
          }
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.bg-form {
  background: #ffffff;
  padding: 20px;
}
</style>
